<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>活动详情 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --secondary: #7c3aed;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 12px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        .nav-btn.primary {
            color: var(--primary);
        }
        
        /* 活动头部图片 */
        .event-header-image {
            width: 100%;
            position: relative;
        }
        
        .event-header-image img {
            width: 100%;
            display: block;
        }
        
        .event-status {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 14px;
            padding: 4px 10px;
            border-radius: 6px;
            font-weight: 500;
            z-index: 10;
        }
        
        .status-upcoming {
            background-color: rgba(79, 70, 229, 0.9);
            color: white;
        }
        
        .status-live {
            background-color: rgba(239, 68, 68, 0.9);
            color: white;
        }
        
        .status-ended {
            background-color: rgba(100, 116, 139, 0.9);
            color: white;
        }
        
        /* 活动内容容器 */
        .event-container {
            background-color: var(--bg-white);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: -20px;
            padding: 20px 16px 16px;
            position: relative;
            z-index: 10;
        }
        
        /* 活动标题和操作 */
        .event-title-section {
            margin-bottom: 16px;
        }
        
        .event-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        
        .event-actions {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .event-action-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: 8px;
            font-weight: 500;
            font-size: 15px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .join-btn {
            background-color: var(--primary);
            color: white;
        }
        
        .share-btn {
            background-color: var(--bg-light);
            color: var(--text-primary);
        }
        
        .favorite-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
        }
        
        .favorite-btn.active {
            color: var(--danger);
        }
        
        /* 活动基本信息 */
        .event-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .host-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .host-info {
            flex: 1;
        }
        
        .host-name {
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .host-type {
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .follow-btn {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid var(--primary);
            color: var(--primary);
            background-color: transparent;
        }
        
        .follow-btn.following {
            background-color: var(--primary);
            color: white;
        }
        
        /* 活动详情信息 */
        .event-details {
            margin-bottom: 24px;
        }
        
        .detail-section {
            margin-bottom: 20px;
        }
        
        .detail-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .detail-content {
            font-size: 15px;
            line-height: 1.6;
            color: var(--text-primary);
        }
        
        .detail-content p {
            margin-bottom: 12px;
        }
        
        .detail-content p:last-child {
            margin-bottom: 0;
        }
        
        /* 活动信息列表 */
        .info-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .info-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        
        .info-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .info-text {
            flex: 1;
        }
        
        .info-label {
            font-size: 13px;
            color: var(--text-tertiary);
            margin-bottom: 2px;
        }
        
        .info-value {
            font-size: 15px;
            font-weight: 500;
        }
        
        /* 活动图片展示 */
        .event-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            margin-bottom: 20px;
        }
        
        .gallery-image {
            aspect-ratio: 1/1;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .gallery-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .gallery-more {
            position: relative;
        }
        
        .gallery-more::after {
            content: '+5';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        /* 参与者列表 */
        .participants {
            margin-bottom: 24px;
        }
        
        .participant-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .participant-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 60px;
        }
        
        .participant-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 5px;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .participant-name {
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
        
        /* 留言区 */
        .comments-section {
            margin-bottom: 80px;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .comments-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .comments-count {
            color: var(--text-tertiary);
        }
        
        /* 留言输入框 */
        .comment-input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            padding: 0 16px;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-input-group {
            flex: 1;
            position: relative;
        }
        
        .comment-input {
            width: 100%;
            padding: 12px 16px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
            resize: none;
            height: 44px;
        }
        
        .send-comment {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--primary);
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 留言列表 */
        .comments-list {
            padding: 0 16px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        
        .comment-author {
            font-size: 14px;
            font-weight: 600;
        }
        
        .comment-time {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .comment-text {
            font-size: 15px;
            margin-bottom: 8px;
            padding: 8px 12px;
            background-color: var(--bg-light);
            border-radius: 10px;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }
        
        .comment-action.liked {
            color: var(--danger);
        }
        
        /* 回复列表 */
        .replies-list {
            margin-left: 30px;
            margin-top: 12px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .reply-content {
            flex: 1;
        }
        
        .reply-text {
            font-size: 14px;
            padding: 6px 10px;
            background-color: var(--bg-light);
            border-radius: 8px;
            margin-bottom: 6px;
        }
        
        .reply-text .reply-to {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 图片预览弹窗 */
        .image-preview-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        
        .image-preview-modal.active {
            display: flex;
        }
        
        .preview-image {
            max-width: 90%;
            max-height: 80%;
            object-fit: contain;
        }
        
        .close-preview {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">活动详情</div>
        <button class="nav-btn primary" id="moreBtn">
            <i class="fas fa-ellipsis-h"></i>
        </button>
    </div>
    
    <!-- 活动头部图片 -->
    <div class="event-header-image">
        <img src="https://picsum.photos/id/1/600/400" alt="活动封面">
        <span class="event-status status-upcoming">即将开始</span>
    </div>
    
    <!-- 活动内容容器 -->
    <div class="event-container">
        <!-- 活动标题和操作 -->
        <div class="event-title-section">
            <h1 class="event-title">2023年度科技创新峰会：人工智能与未来生活</h1>
            
            <div class="event-actions">
                <button class="event-action-btn join-btn" id="joinBtn">
                    <i class="fas fa-user-plus"></i> 我要参加
                </button>
                <button class="event-action-btn share-btn" id="shareBtn">
                    <i class="fas fa-share-alt"></i> 分享
                </button>
                <button class="favorite-btn" id="favoriteBtn">
                    <i class="far fa-heart"></i>
                </button>
            </div>
        </div>
        
        <!-- 活动主办方信息 -->
        <div class="event-meta">
            <img src="https://picsum.photos/id/65/100/100" alt="主办方头像" class="host-avatar">
            <div class="host-info">
                <div class="host-name">未来科技协会</div>
                <div class="host-type">官方认证 · 科技组织</div>
            </div>
            <button class="follow-btn" id="followBtn">关注</button>
        </div>
        
        <!-- 活动详情信息 -->
        <div class="event-details">
            <!-- 活动基本信息 -->
            <div class="detail-section">
                <h2 class="detail-title">
                    <i class="fas fa-info-circle" style="color: var(--primary);"></i> 活动信息
                </h2>
                <div class="info-list">
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="far fa-calendar-alt"></i>
                        </div>
                        <div class="info-text">
                            <div class="info-label">活动时间</div>
                            <div class="info-value">2023年7月8日 09:00 - 17:00</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="info-text">
                            <div class="info-label">活动地点</div>
                            <div class="info-value">国际会展中心A馆 3楼多功能厅</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-ticket-alt"></i>
                        </div>
                        <div class="info-text">
                            <div class="info-label">活动费用</div>
                            <div class="info-value">VIP票 ¥399 / 普通票 ¥199</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-user-friends"></i>
                        </div>
                        <div class="info-text">
                            <div class="info-label">参与人数</div>
                            <div class="info-value">328人已报名，限500人</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 活动介绍 -->
            <div class="detail-section">
                <h2 class="detail-title">
                    <i class="fas fa-book" style="color: var(--primary);"></i> 活动介绍
                </h2>
                <div class="detail-content">
                    <p>2023年度科技创新峰会将汇聚全球科技领域的顶尖专家和企业家，共同探讨人工智能如何重塑未来生活。本次峰会包含主题演讲、圆桌论坛、技术展示和互动体验四大板块。</p>
                    <p>主要议题包括：</p>
                    <p>• 人工智能在医疗健康领域的突破性应用</p>
                    <p>• 智能家居与物联网构建的未来生活场景</p>
                    <p>• 机器学习算法的伦理与监管挑战</p>
                    <p>• 创业公司如何在AI浪潮中寻找机遇</p>
                    <p>现场将设置多个体验区，让参与者近距离感受最新的AI技术产品。所有参会者将获得峰会纪念手册和相关资料包。</p>
                </div>
            </div>
            
            <!-- 活动日程 -->
            <div class="detail-section">
                <h2 class="detail-title">
                    <i class="fas fa-clock" style="color: var(--primary);"></i> 活动日程
                </h2>
                <div class="detail-content">
                    <p><strong>09:00 - 09:30</strong> 签到入场</p>
                    <p><strong>09:30 - 10:30</strong> 开幕致辞与主题演讲</p>
                    <p><strong>10:45 - 12:00</strong> 圆桌论坛：AI与未来十年</p>
                    <p><strong>12:00 - 13:30</strong> 午餐交流</p>
                    <p><strong>13:30 - 15:00</strong> 分论坛：各领域应用探讨</p>
                    <p><strong>15:15 - 16:45</strong> 技术展示与互动体验</p>
                    <p><strong>16:45 - 17:00</strong> 闭幕总结</p>
                </div>
            </div>
            
            <!-- 活动图片 -->
            <div class="detail-section">
                <h2 class="detail-title">
                    <i class="fas fa-images" style="color: var(--primary);"></i> 活动图片
                </h2>
                <div class="event-gallery">
                    <div class="gallery-image">
                        <img src="https://picsum.photos/id/20/300/300" alt="活动图片1" class="gallery-img">
                    </div>
                    <div class="gallery-image">
                        <img src="https://picsum.photos/id/21/300/300" alt="活动图片2" class="gallery-img">
                    </div>
                    <div class="gallery-image gallery-more">
                        <img src="https://picsum.photos/id/22/300/300" alt="活动图片3" class="gallery-img">
                    </div>
                </div>
            </div>
            
            <!-- 参与者列表 -->
            <div class="detail-section participants">
                <h2 class="detail-title">
                    <i class="fas fa-users" style="color: var(--primary);"></i> 已报名参与者
                </h2>
                <div class="participant-list">
                    <div class="participant-item">
                        <img src="https://picsum.photos/id/91/100/100" alt="参与者1" class="participant-avatar">
                        <span class="participant-name">张明</span>
                    </div>
                    <div class="participant-item">
                        <img src="https://picsum.photos/id/92/100/100" alt="参与者2" class="participant-avatar">
                        <span class="participant-name">李华</span>
                    </div>
                    <div class="participant-item">
                        <img src="https://picsum.photos/id/93/100/100" alt="参与者3" class="participant-avatar">
                        <span class="participant-name">王芳</span>
                    </div>
                    <div class="participant-item">
                        <img src="https://picsum.photos/id/94/100/100" alt="参与者4" class="participant-avatar">
                        <span class="participant-name">赵伟</span>
                    </div>
                    <div class="participant-item">
                        <img src="https://picsum.photos/id/95/100/100" alt="参与者5" class="participant-avatar">
                        <span class="participant-name">陈静</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 留言区 -->
    <div class="comments-section">
        <div class="comments-header">
            <h2 class="comments-title">
                留言区 <span class="comments-count">(156)</span>
            </h2>
        </div>
        
        <!-- 留言输入框 -->
        <div class="comment-input-container">
            <img src="https://picsum.photos/id/64/100/100" alt="我的头像" class="comment-avatar">
            <div class="comment-input-group">
                <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
                <button class="send-comment" id="sendComment">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
        
        <!-- 留言列表 -->
        <div class="comments-list">
            <!-- 留言1 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/91/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">张明</span>
                        <span class="comment-time">2小时前</span>
                    </div>
                    <div class="comment-text">
                        去年参加过这个峰会，内容非常精彩，今年一定会再去！想知道今年有没有特别的嘉宾？
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-btn" data-comment="1">
                            <i class="far fa-heart"></i> 24
                        </div>
                        <div class="comment-action reply-btn" data-comment="1">
                            <i class="far fa-comment"></i> 回复
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/65/100/100" alt="回复者头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-header">
                                    <span class="comment-author">未来科技协会</span>
                                    <span class="comment-time">1小时前</span>
                                </div>
                                <div class="reply-text">
                                    <span class="reply-to">@张明</span> 今年我们邀请了多位AI领域的国际专家，包括OpenAI的技术总监和谷歌DeepMind的研究员，敬请期待！
                                </div>
                                <div class="comment-actions">
                                    <div class="comment-action like-btn" data-reply="1">
                                        <i class="far fa-heart"></i> 8
                                    </div>
                                    <div class="comment-action reply-btn" data-reply="1">
                                        <i class="far fa-comment"></i> 回复
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言2 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/92/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">李华</span>
                        <span class="comment-time">昨天 15:30</span>
                    </div>
                    <div class="comment-text">
                        请问普通票和VIP票有什么区别？VIP票会有额外的福利吗？
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-btn" data-comment="2">
                            <i class="far fa-heart"></i> 12
                        </div>
                        <div class="comment-action reply-btn" data-comment="2">
                            <i class="far fa-comment"></i> 回复
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言3 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/93/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">王芳</span>
                        <span class="comment-time">3天前</span>
                    </div>
                    <div class="comment-text">
                        从外地过来参加，请问会场附近有推荐的酒店吗？有没有参会者的住宿优惠？
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-btn" data-comment="3">
                            <i class="far fa-heart"></i> 5
                        </div>
                        <div class="comment-action reply-btn" data-comment="3">
                            <i class="far fa-comment"></i> 回复
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/94/100/100" alt="回复者头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-header">
                                    <span class="comment-author">赵伟</span>
                                    <span class="comment-time">2天前</span>
                                </div>
                                <div class="reply-text">
                                    <span class="reply-to">@王芳</span> 我去年住的会展中心旁边的希尔顿酒店，步行5分钟就到，环境不错。
                                </div>
                                <div class="comment-actions">
                                    <div class="comment-action like-btn" data-reply="2">
                                        <i class="far fa-heart"></i> 3
                                    </div>
                                    <div class="comment-action reply-btn" data-reply="2">
                                        <i class="far fa-comment"></i> 回复
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-calendar-alt nav-icon"></i>
            <span>活动</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle nav-icon"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- 图片预览弹窗 -->
    <div class="image-preview-modal" id="imagePreviewModal">
        <img src="" alt="图片预览" class="preview-image" id="previewImage">
        <button class="close-preview" id="closePreview">
            <i class="fas fa-times"></i>
        </button>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const moreBtn = document.getElementById('moreBtn');
        const joinBtn = document.getElementById('joinBtn');
        const shareBtn = document.getElementById('shareBtn');
        const favoriteBtn = document.getElementById('favoriteBtn');
        const followBtn = document.getElementById('followBtn');
        const sendCommentBtn = document.getElementById('sendComment');
        const likeButtons = document.querySelectorAll('.like-btn');
        const replyButtons = document.querySelectorAll('.reply-btn');
        const galleryImages = document.querySelectorAll('.gallery-img');
        const imagePreviewModal = document.getElementById('imagePreviewModal');
        const previewImage = document.getElementById('previewImage');
        const closePreview = document.getElementById('closePreview');
        const toast = document.getElementById('toast');
        const commentInput = document.querySelector('.comment-input');
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 打开图片预览
        function openImagePreview(src) {
            previewImage.src = src;
            imagePreviewModal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭图片预览
        function closeImagePreview() {
            imagePreviewModal.classList.remove('active');
            document.body.style.overflow = 'auto';
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回活动列表');
            });
            
            // 更多选项按钮
            moreBtn.addEventListener('click', () => {
                showToast('更多操作选项');
            });
            
            // 参加活动按钮
            joinBtn.addEventListener('click', function() {
                if (this.textContent.includes('我要参加')) {
                    this.innerHTML = '<i class="fas fa-check"></i> 已报名';
                    this.style.backgroundColor = 'var(--success)';
                    showToast('报名成功');
                } else {
                    this.innerHTML = '<i class="fas fa-user-plus"></i> 我要参加';
                    this.style.backgroundColor = 'var(--primary)';
                    showToast('已取消报名');
                }
            });
            
            // 分享按钮
            shareBtn.addEventListener('click', () => {
                showToast('分享链接已复制到剪贴板');
            });
            
            // 收藏按钮
            favoriteBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('active');
                    showToast('已收藏活动');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('active');
                    showToast('已取消收藏');
                }
            });
            
            // 关注按钮
            followBtn.addEventListener('click', function() {
                if (this.textContent === '关注') {
                    this.textContent = '已关注';
                    this.classList.add('following');
                    showToast('已关注未来科技协会');
                } else {
                    this.textContent = '关注';
                    this.classList.remove('following');
                    showToast('已取消关注');
                }
            });
            
            // 发送留言
            sendCommentBtn.addEventListener('click', () => {
                const commentText = commentInput.value.trim();
                if (commentText) {
                    showToast('留言发布成功');
                    commentInput.value = '';
                    // 实际应用中这里会添加新留言到列表
                } else {
                    showToast('请输入留言内容');
                }
            });
            
            // 留言点赞
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    let countText = this.textContent.trim().split(' ')[1];
                    let count = parseInt(countText);
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                        showToast('点赞成功');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                        showToast('已取消点赞');
                    }
                });
            });
            
            // 回复按钮
            replyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const commentId = this.getAttribute('data-comment');
                    const replyId = this.getAttribute('data-reply');
                    
                    if (commentId) {
                        showToast('回复评论功能');
                        // 实际应用中会激活回复输入框
                    } else if (replyId) {
                        showToast('回复这条回复');
                        // 实际应用中会激活回复输入框
                    }
                });
            });
            
            // 图片预览
            galleryImages.forEach(img => {
                img.addEventListener('click', function() {
                    openImagePreview(this.src);
                });
            });
            
            // 关闭图片预览
            closePreview.addEventListener('click', closeImagePreview);
            
            // 点击预览背景关闭
            imagePreviewModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closePreview();
                }
            });
            
            // 留言输入框高度自适应
            commentInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight > 100 ? 100 : this.scrollHeight) + 'px';
            });
        }
        
        // 初始化
        function init() {
            bindEvents();
        }
        
        // 启动
        init();
    </script>
</body>
</html>
